<!--
 * @Author: C.
 * @Date: 2023-12-01 16:02:46
-->
<template>
  <view class="page-wrapper">
    <view class="page-banner">
      <view class="banner-top">
        <view>总机台数</view>
        <view class="top-value">{{ totalCount }}</view>
      </view>
      <view class="box-wrapper">
        <view
          v-for="(item, index) in chartData"
          :key="index"
          class="data-box"
          :style="{
            backgroundColor: item.color,
          }"
        >
          <view class="data-box-title">
            {{ item.label }}
          </view>
          <view class="data-box-value">
            {{ item.value }}
          </view>
        </view>
      </view>
    </view>
    <ChartWrapper title="加工信息">
      <qiun-data-charts
        type="ring"
        canvas-id="finance_b"
        :opts="opts"
        :chart-data="getChartData"
      />
    </ChartWrapper>
    <ChartWrapper title="机台详情">
      <MachineBar v-for="item in listData" :key="item" :machine="item" />
    </ChartWrapper>
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { computed, onMounted, ref } from 'vue'
import MachineBar from './components/MachineBar.vue'
import { useIndexPage, useIndexPageProvide } from '@/hooks/web/useIndexPage'
// import TextBlock from '@/components/text-block/index.vue'
// ----------------------------- hooks -----------------------------
import { usePolling } from '@/hooks/event/usePolling'
// ----------------------------- 组件 -----------------------------
import ChartWrapper from '@/components/chart-wrapper/index'
// ----------------------------- 其他引入 -----------------------------
import { DeviceStateEnum } from '@/maps/device/DeviceStateEnum'
import {
  getDeviceList,
  getEquipmentOperationStatistics,
} from '@/api/report/deviceCollection'
//----------------------------- 变量声明区 -----------------------------
function onLoad() {
  // onLoad
}
function onShow() {
  // onShow
}
function onHide() {
  // onHide
}
useIndexPageProvide('main', onShow, onLoad, onHide)
const chartData = ref<any[]>([])
const listData = ref<any[]>([])
const totalCount = computed(() => {
  let count = 0
  chartData.value.forEach((item) => {
    count += item.value
  })
  return count
})
const getChartData = computed(() => {
  return {
    series: [
      {
        data: chartData.value,
      },
    ],
  }
})
const opts = ref({
  update: true,
  duration: 20, // 0
  animation: false,
  padding: [15, 0, 4, 0],
  legend: { position: 'right' },
  title: { name: 0 },
  subtitle: { name: '运行状态', fontSize: '20' },
})
// ----------------------------- hooks使用区 -----------------------------
const DeviceState = usePolling(getDeviceState)
const DeviceLists = usePolling(getDeviceLists)
// ----------------------------- 钩子函数区 -----------------------------
onMounted(() => {
  DeviceState.flush()
  DeviceLists.flush()
  // getDeviceLists()
})
//  ----------------------------- 自定义方法区 -----------------------------
async function getDeviceState() {
  const data: any[] = await getEquipmentOperationStatistics()
  chartData.value = data.map((item) => {
    const v = DeviceStateEnum.getItem(item.DeviceState)
    return {
      name: v?.label,
      ...v,
      value: item.DeviceCount,
    }
  })
}
async function getDeviceLists() {
  const data = await getDeviceList()
  listData.value = data
}
</script>
<style lang="scss" scoped>
.page-wrapper {
  padding-bottom: 300rpx;
}
.page-banner {
  background-color: $m-theme-bg;
  /* height: 400rpx; */
  padding: 46px 20rpx 20rpx 20rpx;

  width: 100%;
  color: #fff;
  .banner-top {
    margin-bottom: 30rpx;
    @include flexBox($ai: center, $ff: column);
    font-size: 40rpx;
    .top-value {
      padding-top: 10rpx;
      font-size: 55rpx;
      font-weight: bold;
    }
  }
  .box-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    .data-box {
      height: 100rpx;
      /* border: 1rpx solid #fff; */
      padding: 10rpx;
      margin-right: 5rpx;
      border-radius: 10rpx;
      &-title {
        font-size: 22rpx;
      }
      &-value {
        padding-top: 10rpx;
        font-size: 45rpx;
        font-weight: bold;
      }
    }
  }
}
/* #3724be */
</style>
